<template>
    <div class="mui-content">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
				<li class="mui-table-view-cell">
					<div class="mui-slider-cell">
						<div class="oa-contact-cell mui-table">
							<div class="oa-contact-avatar mui-table-cell ">
                                <img :src="require('../../../../img/people/'+loginfo.headimgurl)" id="UserHead">
							</div>
							<div class="oa-contact-content mui-table-cell" id="UserInfo">
								<div class="mui-clearfix">
									<h4 class="oa-contact-name" id="UserName">{{loginfo.name}}</h4>
									<span class="oa-contact-position mui-h6">{{loginfo.head}}</span>
								</div>
								<p class="oa-contact-email mui-h6">
									{{loginfo.email}}
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul> 
		</div>
</template>

<script>
export default {
    name: "PeopleHead",
    props:{
        loginfo:{
            type:Object,
            require:true
        }
    },
    data(){
        return{
            login:true
        }
    },methods:{
        iflogin(){
            var name = document.getElementById("UserName").innerText
            if(name=='请登录')
            {
                this.login=false
            }else{
                this.login=true
            }
            this.$emit("iflog",this.login)
        }
    },
    mounted(){
        this.iflogin()
    },
    updated(){
        this.iflogin()
    }
}
</script>
<style scoped lang="stylus">
html,body {
    background-color: #efeff4;
}
.title{
    margin: 20px 15px 10px;
    color: #6d6d72;
    font-size: 15px;
}
    .oa-contact-cell.mui-table .mui-table-cell {
    padding: 11px 0;
    vertical-align: middle;
}

.oa-contact-cell {
    position: relative;
    margin: -11px 0;
}

.oa-contact-avatar {
    width: 75px;
}
.oa-contact-avatar img {
    border-radius: 50%;
}
.oa-contact-content {
    width: 100%;
}
.oa-contact-name {
    margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
    float: left;
}
#UserHead
    width 100px
    height 100px
#UserInfo
    padding-left 40px
</style>